<template>
  <div class="App">
    <ToDoHeader :title="title" v-on:addThings="addFn"></ToDoHeader>
    <ToDoMain :toDoList="toDoList" v-on:deleThing="delFn"></ToDoMain>
    <ToDoFooter :count="toDoList.length" v-on:clearThing="clearFn"></ToDoFooter>
  </div>
</template>

<script>
import ToDoHeader from "./components/ToDoHeader.vue";
import ToDoMain from "./components/ToDoMain.vue";
import ToDoFooter from "./components/ToDoFooter.vue";

export default {
  components: {
    ToDoHeader,
    ToDoMain,
    ToDoFooter,
  },
  data() {
    return {
      title: "小黑记事本",
      // 查询todoList
      toDoList: JSON.parse(localStorage.getItem('list')) || [],
    };
  },
  methods: {
    addFn(newVal) {
      console.log(newVal);
      // 执行添加入库操作

      this.toDoList.push({ id: newVal.id, name: newVal.name });
    },
    delFn(id) {
      console.log("通过id删除数据", id);
      this.toDoList = this.toDoList.filter((item) => item.id != id);
    },
    clearFn() {
      console.log("清空任务");
      this.toDoList = [];
    },
  },
  watch:{
    toDoList:{
      deep:true,
      immediate:true,
      handler(newVal) {
        console.log("数据有变化", newVal)
        localStorage.setItem('list', JSON.stringify(newVal))
      }
    }
  }
};
</script>

<style scoped>
.App {
  width: 500px;
  height: auto;
  background-color: pink;
}
</style>